<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶部插件示例</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="content">
        <h1>欢迎来到回到顶部插件示例页面</h1>
        <p>向下滚动页面以查看效果。</p>
        <p>这里是更多的内容...</p>
        <h2>关于这个插件</h2>
        <p>这个插件可以帮助用户快速返回页面顶部，提升用户体验。</p>
        <h3>如何使用</h3>
        <p>只需向下滚动页面，当页面滚动超过一定距离时，按钮会自动显示。点击按钮即可返回页面顶部。</p>
        <div style="height: 2000px;"></div> <!-- 仅用于测试滚动效果 -->
    </div>
    <!-- 修改按钮内容为Font Awesome图标 -->
    <button id="backToTopButton" title="回到顶部"><i class="fas fa-arrow-up"></i></button>
    <script src="script.js"></script>
</body>
</html>